<!DOCTYPE html>
<html>
	<head>
		<title>GEDCOM File Reader</title>
		<style type="text/css">
			html {
				height:100%;
				width:100%;
			}
			body {
				margin:0px;
				text-align:center;
				width:100%;
				height:100%;
				font-family:arial,helvetica,sans-serif;
			}
			#container {
				text-align:center;
				position:absolute;
				top:0;
				left:0;
			}
			#row {
				position:absolute;
				overflow:hidden;
			}
			#person {
				text-align:center;
				overflow:hidden;
				vertical-align:middle;
			}
			h3 {
				display:inline;
				font-size:11px;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript">
			var individuals = [];
			var families = [];
			var sources = [];
			$.ajax({
				url:'lustig.ged',
				dataType:'text',
				success: function(result) {
					var data = result.replace(/\r/g,"").split("\n");
					$(data).each(function(i) {
						var strings = data[i].split(" ",2);
						strings[2] = data[i].replace(strings[0]+" "+strings[1],"");
						if (strings[2].substring(0,1) == " ") {
							strings[2] = strings[2].substring(1,strings[2].length);
						} 
						if (strings[2].substring(strings[2].length-1,1) == " ") {
							strings[2] = strings[2].substring(0,strings[2].length-1);
						}
						data[i] = strings;
					});
					$(data).each(function(i) {
						if (data[i][0] == "0" && data[i][1] != "HEAD" && data[i][1] != "TRLR") {
							var item = {"ID":data[i][1]};
							var j = i+1;
							var parent = item;
							var stack = [item];
							while (data[j][0] != 0) {
								stack[data[j][0]] = data[j][1];
								for (k=0;k<=parseInt(data[j][0])-1;k++) {
									if (k == 0) {
										parent = item;
									} else {
										if (parent[stack[k]].splice) {
											parent = parent[stack[k]][parent[stack[k]].length-1];
										} else {
											parent = parent[stack[k]];
										}
									}
								}
								if (data[j+1][0] > data[j][0]) {
									if (parent[data[j][1]] != undefined) {
										if (parent[data[j][1]].splice) {
											parent[data[j][1]].push({});
											if (data[j][2] != "") {
												parent[data[j][1]][parent[data[j][1]].length-1]["VAL"] = data[j][2];
											}
										} else {
											parent[data[j][1]] = new Array(parent[data[j][1]],{})
											if (data[j][2] != "") {
												parent[data[j][1]][1]["VAL"] = data[j][2];
											}
										}
									} else {
										parent[data[j][1]] = {};
										if (data[j][2] != "") {
											parent[data[j][1]]["VAL"] = data[j][2];
										}
									}
								} else {
									if (parent[data[j][1]] != undefined) {
										if (parent[data[j][1]].splice) {
											parent[data[j][1]].push(data[j][2]);
										} else {
											parent[data[j][1]] = new Array(parent[data[j][1]],data[j][2])
										}
									} else {																					parent[data[j][1]] = data[j][2];
									}
								}
								j++;
							}
							switch(data[i][2]) {
								case "FAM ":
									families.push(item);
									break;
								case "INDI ":
									individuals.push(item);
									break;
								case "SOUR":
									sources.push(item);
								default:
									break;
							}
						}
					});
					var basewidth = 200;
					//var basepad = 10;
					//var indwidth = basewidth+(2*basepad);
					var indwidth = basewidth;
					var rowwidth;
					var rowheight;
					var person = individuals[0];
					var people = [];
					var count = 2;
					var rowcount = 0;
					var name;
					for (i in families) {
						if (families[i].ID == person.FAMS) {
							for (j in individuals) {
								if (individuals[j].ID == families[i].HUSB || individuals[j].ID == families[i].WIFE) {
									people.push(individuals[j]);
								}
							}
						}
					}
					//people.push(person);
					//rowwidth = count*indwidth;
					var baseheight = $('body').height()/count;
					//var indheight = baseheight+(2*basepad);
					var indheight = baseheight;
					rowheight = count*indheight;
					rowleft = 0;
					$('#container').append($('<div id="row">').css('height',rowheight+'px').css('top',($('body').height()/2)-(rowheight/2)+'px').css('left',rowleft+'px'));
					for (i = 0;i<256;i++) {
						person = people[i];
						var famIndex = 0;
						while (families[famIndex] != undefined && families[famIndex].ID != person.FAMC) {
							famIndex++;
						}
						if (families[famIndex] != undefined) {
							var wife = false;
							var husband = false;
							for (k in individuals) {
								if (individuals[k].ID == families[famIndex].HUSB) {
									people.push(individuals[k]);
									husband = true;
								}
								if (individuals[k].ID == families[famIndex].WIFE) {
									people.push(individuals[k]);
									wife = true;
								}
							}
							if (husband != true) {
								people.push({"NAME":"Nobody!"});
							}
							if (wife != true) {
								people.push({"NAME":"Nobody!"});
							}
						} else {
							people.push({"NAME":"Nobody!"},{"NAME":"Nobody!"});
						}
						if (i == count) {
							rowcount++;
							var baseheight = $('body').height()/(count+2);
							var indheight = baseheight+(2*basepad);
							rowleft = rowcount*indwidth;
							rowheight = (count+2)*indheight;
							$('#container').append($('<div id="row">').css('height',rowheight+'px').css('top',($('body').height()/2)-(rowheight/2)+'px').css('left',rowleft+'px'));
							count = (count*2)+2;
						}
						if (typeof(person.NAME) == "string") {
							name = person.NAME;
						} else {
							if (person.NAME.VAL != undefined) {
								name = person.NAME.VAL;
							} else {
								name = person.NAME[0].VAL;
							}
						}
						name = name.replace(/\//g,"");
						$('#row:last-child').append($('<div id="person">').css('width',basewidth+'px').css('padding',basepad+'px').css('height',baseheight+'px').html('<h3>'+name+'</h3>'));
					}
				}
			});
			$(document).delegate('#container','mousedown',function(click) {
				$(this).css('cursor','move');
				var x = click.pageX;
				var y = click.pageY;
				var left = parseInt($('#container').css('left'));
				var top = parseInt($('#container').css('top'));
				$(this).mouseup(function() {
					$(this).unbind('mousemove');
					$(this).css('cursor','auto');
				});
				$(this).mousemove(function(e) {
					$('#container').css('left',(left+(e.pageX-x))+"px");
					$('#container').css('top',(top+(e.pageY-y))+"px");
				});
			});
		</script>
	</head>
	<body>
		<div id="container"></div>
	</body>
</html>